<template>
  {{info}}
<!-- v-model='变量',双向绑定,当需要获取用户输入的内容时使用 -->
  <input type="text" v-model="info">
  <h3>登录页面</h3>
  <input type="text" v-model="user.username" placeholder="请输入用户名">
  <input type="password" v-model="user.password" placeholder="请输入密码">
  <input type="button" value="登录" @click="f()">
</template>

<script setup>

import {ref} from "vue";
const f = ()=>{
  console.log(user.value.username+"-"+user.value.password)
}
const user = ref({username:'',password:''});
const info = ref("双向绑定");;
</script>

<style scoped>

</style>